<template>
  <div>
    <div class="Top" style="display: flex; justify-content: center;">
      <h3>省市区三级联动</h3>
    </div>
    <span class="demonstration">三级联动</span>
    <!-- 省份-->
    <el-select v-model="selectedProvince" @change="handleProvinceChange">
      <el-option value="" disabled selected hidden label="请选择省份"></el-option>
      <el-option :value="province.code" :label="province.name" v-for="(province, index) in provinces"
        :key="index"></el-option>
    </el-select>

    <!--城市-->
    <el-select v-model="selectedCity" @change="handleCitiesChange">
      <el-option value="" disabled selected hidden label="请选择城市"></el-option>
      <el-option :value="city.code" :label="city.name" v-for="(city, index) in cities" :key="index"></el-option>
    </el-select>

    <!--区县-->
    <el-select v-model="selectedDistrict">
      <el-option value="" disabled selected hidden label="请选择区县"></el-option>
      <el-option :value="district.code" :label="district.name" v-for="(district, index) in districts"
        :key="index"></el-option>
    </el-select>

  </div>
</template>
  
<script>
import { getList, getCitiesList, getDistrictsList } from '@/api/myLink'
export default {
  name: 'myLink',
  data() {
    return {
      provinces: [],         // 存放所有省份信息
      cities: [],            // 存放当前选中省份对应的城市信息
      districts: [],         // 存放当前选中城市对应的区县信息
      selectedProvince: null,  // 保存当前选中的省份code
      selectedCity: null,      // 保存当前选中的城市code
      selectedDistrict: null  // 保存当前选中的区县code
    };
  },
  created() {
    this.getProvinces();
  },

  methods: {

    async getProvinces() {
      try {
        const response = await getList();
        if (response.data.code === "200") {
          this.provinces = response.data.data;
        }
      } catch (error) {
        console.error(error);
      }
    },
    handleProvinceChange(selectedProvince) {
      // 清空市区数据
      this.cities = [];
      this.districts = [];
      // 当用户选择省份时触发的方法
      this.selectedProvince = selectedProvince;
      // 调用后端接口获取对应的城市列表
      this.getCities();
    },
    async getCities() {
      if (this.selectedProvince === '') {
        this.cities = [];
        return;
      }
      try {
        const response = await getCitiesList(this.selectedProvince);
        if (response.data.code === "200") {
          this.cities = response.data.data;

        }
      } catch (error) {
        console.error(error);
      }
    },
    handleCitiesChange(selectedCity) {
      this.selectedCity = selectedCity;
      this.getDistricts();
    },
    async getDistricts() {
      if (this.selectedCity === '') {
        this.districts = [];
        return;
      }
      try {
        const response = await getDistrictsList(this.selectedCity);
        if (response.data.code === "200") {
          this.districts = response.data.data;
        }
      } catch (error) {
        console.error(error);
      }
    }
  }
}
</script>
  
<style>
.container {
  display: flex;
  justify-content: center;
}

.center-button {
  margin: 0 auto;
}
</style>